<style>
    .difftxt {
        width: auto;
        padding: 2px;
        margin-left: 108px;
        height: 30px !important;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <label class="btn btn-primary btn-sm float-left">
                <input type="file" class="d-none" id="fileOrigin" />选择原始文件
            </label>
            <textarea class="form-control difftxt" id="txtOrigin" placeholder="或 粘贴内容"></textarea>
        </div>
        <div class="col-md-5">
            <label class="btn btn-info btn-sm float-left">
                <input type="file" class="d-none" id="fileVary" />选择变动文件
            </label>
            <textarea class="form-control difftxt" id="txtVary" placeholder="或 粘贴内容"></textarea>
        </div>
        <div class="col-md-2">
            <label>
                <input type="checkbox" id="chkDiffMode" /> 内联对比
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="editor" class="border"></div>
        </div>
    </div>
</div>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("monaco-editor"))

<script>
    var editor, originContent = '', varyContent = '';

    $('#chkDiffMode').click(changeDiffMode);
    function changeDiffMode() {
        if (editor) {
            editor.updateOptions({
                renderSideBySide: !$('#chkDiffMode').is(':checked')
            });
        }
    }
    function createDiffEditor(text1, text2) {
        $('#editor').empty();
        require(['vs/editor/editor.main'], function () {
            var originalModel = monaco.editor.createModel(text1 || "", "text/plain");
            var modifiedModel = monaco.editor.createModel(text2 || "", "text/plain");
            editor = monaco.editor.createDiffEditor(document.getElementById("editor"), {
                automaticLayout: true,
                scrollbar: {
                    verticalScrollbarSize: 6,
                    horizontalScrollbarSize: 6
                },
                minimap: {
                    enabled: false
                }
            });
            editor.setModel({
                original: originalModel,
                modified: modifiedModel
            });
            changeDiffMode();
        });
    }
    $('#fileOrigin').change(function () {
        if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function () {
                createDiffEditor(originContent = this.result, varyContent);
            };
            reader.readAsText(this.files[0]);
        }
    });
    $('#txtOrigin').on('input', function () {
        createDiffEditor(originContent = this.value, varyContent);
    });
    $('#fileVary').change(function () {
        if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function () {
                createDiffEditor(originContent, varyContent = this.result);
            };
            reader.readAsText(this.files[0]);
        }
    });
    $('#txtVary').on('input', function () {
        createDiffEditor(originContent, varyContent = this.value);
    });

    function AutoHeight() {
        var ch = $(window).height() - $('#editor').offset().top - 15;
        $('#editor').css('height', Math.max(200, ch));
    }
    $(window).on('load resize', AutoHeight);
</script>